<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI需求智能设计助手 - 文件上传</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            transition: border-color 0.3s;
        }
        .upload-area:hover {
            border-color: #007bff;
        }
        .upload-area.highlight {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .file-input {
            margin: 20px 0;
        }
        .file-input input[type="file"] {
            display: none;
        }
        .file-label {
            display: inline-block;
            padding: 12px 24px;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .file-label:hover {
            background-color: #0056b3;
        }
        .upload-btn {
            padding: 12px 30px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .upload-btn:hover {
            background-color: #218838;
        }
        .upload-btn:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            display: none;
        }
        .result.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .result.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .file-info {
            margin-top: 15px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI需求智能设计助手</h1>
        <div class="upload-area" id="uploadArea">
            <h2>上传需求文档</h2>
            <p>支持 PDF、Word、Markdown 等格式</p>
            <div class="file-input">
                <input type="file" id="fileInput" accept=".pdf,.doc,.docx,.md,.txt">
                <label for="fileInput" class="file-label">选择文件</label>
            </div>
            <div class="file-info" id="fileInfo">未选择文件</div>
            <button class="upload-btn" id="uploadBtn" disabled>上传文件</button>
        </div>
        <div class="result" id="result"></div>
    </div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const uploadBtn = document.getElementById('uploadBtn');
        const uploadArea = document.getElementById('uploadArea');
        const fileInfo = document.getElementById('fileInfo');
        const result = document.getElementById('result');

        // 文件选择事件
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                fileInfo.textContent = `已选择: ${file.name} (${formatFileSize(file.size)})`;
                uploadBtn.disabled = false;
            } else {
                fileInfo.textContent = '未选择文件';
                uploadBtn.disabled = true;
            }
        });

        // 拖拽事件
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            uploadArea.classList.add('highlight');
        });

        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('highlight');
        });

        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('highlight');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                fileInput.files = files;
                const file = files[0];
                fileInfo.textContent = `已选择: ${file.name} (${formatFileSize(file.size)})`;
                uploadBtn.disabled = false;
            }
        });

        // 上传按钮事件
        uploadBtn.addEventListener('click', function() {
            const file = fileInput.files[0];
            if (!file) {
                showResult('请选择一个文件', 'error');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            // 禁用按钮并显示上传中状态
            uploadBtn.disabled = true;
            uploadBtn.textContent = '上传中...';

            // 发送上传请求
            fetch('/helloworld/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                showResult(data, 'success');
            })
            .catch(error => {
                showResult('上传失败: ' + error.message, 'error');
            })
            .finally(() => {
                // 恢复按钮状态
                uploadBtn.disabled = false;
                uploadBtn.textContent = '上传文件';
            });
        });

        // 显示结果
        function showResult(message, type) {
            result.textContent = message;
            result.className = 'result ' + type;
            result.style.display = 'block';
            
            // 3秒后自动隐藏结果
            setTimeout(() => {
                result.style.display = 'none';
            }, 3000);
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>